<template>
	<view class="content util-page-height">
		<view class="uni-flex uni-column uni-common-mt util-full-height util-flex-mian-center">
			<view class="uni-flex uni-row uni-center header">
				<text class="title">{{ community }}</text>
			</view>
			<view class="uni-flex uni-column util-flex-mian-center main">
				<view v-if="hasActive">
					<qrcode 
						:size="qrcode.size" 
						:value="qrcode.value" 
						:logo="qrcode.logo" 
						:bgColor="qrcode.bgColor" 
						:fgColor="qrcode.fgColor"
					></qrcode>
				</view>
				<view v-if="!hasActive" class="uni-flex uni-center position-title">
					<text class="position-text">当前到号</text>
				</view>
				<view v-if="!hasActive" class="uni-flex position-count">
					<text class="position-count-text">{{ current }}</text>
				</view>
				<view v-if="!hasActive" class="uni-row uni-center other-info">
					<!-- <text>本次共预约<span>{{ subscribe }}</span>人，</text> -->
					<text>本次剩余<span>{{ remind }}</span>人，请先进行预约</text>
				</view>
				<view v-if="hasActive" class="uni-flex uni-center position-title">
					<text class="position-text">个人牌号</text>
				</view>
				<view v-if="hasActive" class="uni-flex position-count">
					<text class="position-count-text">{{ bookingRank }}</text>
				</view>
				<view v-if="hasActive" class="uni-row uni-center other-info">
					<text>前面还有<span>{{ before }}</span>人，</text>
					<text>预计时间<span>{{ cost }}</span>分钟</text>
				</view>
			</view>
			<view class="uni-btn-v footer">
				<button v-if="hasActive" class="button" type="warn" @click="goScan">扫码销号</button>
				<button v-if="!hasActive" class="button" type="primary" @click="navigateToCreate">队列预约</button>
				<button v-if="hasActive" class="button" type="default" @click="onCancel">取消预约</button>
			</view>
		</view>
	</view>
</template>

<script>
	import Qrcode from "qrcode-vue";
	import QrcodeLogo from "../../static/yunzhu2.jpg";
	export default {
		components: {
			Qrcode
		},
		data() {
			return {
				hasActive: false,
				community: "社区名称",
				current: -1,
				subscribe: -1,
				remind: -1,
				before: -1,
				cost: -1,
				bookingRank: -1,
				qrcode: {
					size: 100,
					bgColor: '#fff',
					fgColor: '#000',
					value: "mockqrcode" + Date.now(),
					logo: QrcodeLogo,
				}
			}
		},
		async onLoad(option) {
			const qrresult = this.getScanResult("qrresult");
			let listId = this.getQueryVariable("listId") || this.$API.User.getListIdentifier();
			if (qrresult) {
				listId = this.getQueryVariable("listId", qrresult);
				const result = await this.$API.User.scan(listId, this.$API.User.getUserIdentifier());
				if (result && result.success) {
					this.$API.User.clearUserIdentifier();
					this.$API.User.clearRelationIdentifier();
				}
			}
			if (listId) {
				this.$API.User.setListIdentifier(listId);
			}
			const result = await this.$API.Community.getDetailByUser(this.$API.User.getListIdentifier());
			if (result && result.success) {
				this.community = result.name;
				this.current = result.current;
				this.subscribe = result.subscribe;
				this.remind = result.remind;
				this.qrcode.value = result.qrcode;
			}
			if (!qrresult) {
				const userId = this.$API.User.getUserIdentifier();
				const relation = this.$API.User.getRelationIdentifier();
				if (!userId) {
					this.hasActive = false;
				} else {
					if (relation[listId] === userId) {
						this.hasActive = true;
						if (result) {
							const result = await this.$API.User.getUserBooking(userId);
							if (result && result.success) {
								this.hasActive = true;
								this.before = result.before;
								this.bookingRank = result.bookingRank;
								this.cost = result.cost;
								this.qrcode.value = result.qrcode;
								// this.qrcode.value = `http://192.168.3.10:8080/#/pages/community/index?userId=${userId}`;
							} else {
								this.hasActive = false;
							}
						}
					} else {
						alert('请销号后再排其他队伍');
					}
				}
			} else {
				this.hasActive = false;
			}
		},
		methods: {
			navigateToCreate() {
				uni.navigateTo({
					url: "./create"
				});
			},
			goScan() {
				const originalHref = window.location.href;
				let href = originalHref;
				if (originalHref.indexOf('?') !== -1) {
					href = originalHref.split('?')[0];
				}
				window.location.href = `http://sao315.com/w/api/saoyisao?redirect_uri=${ encodeURIComponent(href) }`;
			},
			getScanResult(name) {
				var reg = new RegExp("\\b" + name + "=([^&]*)");
				var r = window.location.href.match(reg);
				if (r !== null) {
					return decodeURIComponent(r[1]);
				}
			},
			async onCancel() {
				const userId = this.$API.User.getUserIdentifier();
				const result = await this.$API.User.cancel(userId);
				if (result && result.success) {
					this.hasActive = false;
					this.$API.User.clearUserIdentifier();
					const listId = this.$API.User.getListIdentifier();
					const result = await this.$API.Community.getDetailByUser(listId);
					if (result && result.success) {
						this.community = result.name;
						this.current = result.current;
						this.subscribe = result.subscribe;
						this.remind = result.remind;
						this.qrcode.value = result.qrcode;
					}
				}
			},
			getQueryVariable(varible, href) {
				if (!href) {
					href = window.location.href;
				}
				const startIndex = href.indexOf("?");
				if (startIndex > -1) {
					const queries = href.slice(startIndex + 1).split("=");
					if (queries && queries.length > 0) {
						if (queries[0] === varible) {
							return queries[1];
						}
					}
				}
			},
			openWarnDialog() {
				this.$refs.warnDialog.open("center");
			},
			onWarnConfirmed() {
				uni.navigateTo({
					url: "./create"
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	
	.header {
		flex: 1;
		margin-top: 50rpx;
		align-items: center;
		justify-content: center;
	}

	.main {
		flex: 5;
	}

	.footer {
		flex: 2;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
		font-weight: bold;
	}

	.position-title {
		margin-top: 60rpx;
		flex: 1;
		justify-content: center;
		align-items: center;
	}
	.position-count {
		margin-top: 10rpx;
		flex: 6;
		justify-content: center;
		align-items: top;
	}
	.position-count-text {
		width: 100rpx;
		height: 100rpx;
		line-height: 100rpx;
		text-align: center;
		border: 2px solid green;
		color: green;
		border-radius: 50%;
		font-size: 80rpx;
		font-weight: bold;
	}
	.other-info {
		flex: 1;
	}
	.button {
		font-size: 28rpx;
	}
	.qrcode {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}
</style>
